<template>
    <div>
        <div class="form-control field-goods-tag-container" v-dropdown dropdown-body="body" dropdown-width="auto"  >
            <div class="field-goods-tag-list" ref="content" >
                <div class="field-goods-tag-item" draggable="true" v-for="(item,index) in value" :key="item" :data-drag="item" >
                    <span>{{item}}</span>
                    <bi-icon class="field-goods-tag-remove" data="fa-times" @click.stop="removeItem(index)" ></bi-icon>
                </div>
            </div>
        </div> 
        <div  ref="body" class="field-goods-tag-pop" >
            <bi-icon class="pop-goods-tag-refresh" data="fa-refresh" @click.stop="getGroupList()" ></bi-icon>
            <bi-tab @click.stop="void(0)" v-if="!loading" >
                <bi-tab-item :label="item.title" :key="item.group_id" v-for="(item,index) in groupList" @focus="switchGroup(item,index)" >
                    <div class="pop-goods-tag-container">
                        <div class="pop-goods-tag-list">

                            <div class="pop-goods-tag-item" v-for="(tag,index) in item.list" :key="tag.tag_id" @click="handleItemClick(tag,index)">{{tag.title}}</div>

                            <div class="pop-goods-tag-item" v-if="item.loading" >
                                <bi-icon loading></bi-icon>
                            </div>
                            <div class="pop-goods-tag-item" v-if="item.pageCount>item.page" @click="nextPage(item,index)">
                                <bi-icon data="fa-angle-double-right" ></bi-icon>
                            </div>
                        </div>
                    </div>

                </bi-tab-item>
            </bi-tab>
        </div>
    </div>
</template>

<script>
const storageKey = 'shop-goods-tag-group'; 
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
import dragsort from '@@/admin/assets/bi-plug/dragsort.js';
export default {
    mixins:[fieldMixin],
    data() {
        let groupList = this.$user.getLocalStorage(storageKey)??[];

        let loading = false;
        if (groupList.length == 0) loading = true;
        return {
            
            clearLable:false,
            groupList,
            loading
        }
    },
    computed:{
        value:{
            get(){
                return this.modelValue?this.modelValue.split(','):[];
            },
            set(val){
                let value =  val.join(',');
                this.$emit('update:modelValue',value);
                this.$emit('change',value);
                this.valueChange(value);
            }
        },
        id:{
            get(){
                return this.name!=''?this.name:'input' +  Math.random().toString(10).substr(2);
            }
        }
    },
    methods:{
        switchGroup(item,index){
            if (item.list==undefined || item.list.length == 0){
               this.nextPage(item,index);
            }
        },
        nextPage(item,index){
            this.groupList[index].loading = true;
            this.$ajax({
                url:this.$url({app:'shop','controller':'admin.field',action:'goodsTagList'}),
                data:{
                    group_id:item.group_id,
                    page:item.page
                },
                success:(res)=>{

                    if(item.page!=1){
                        this.groupList[index].list = item.list.concat(res.list);
                    }else{
                        this.groupList[index].list = res.list;
                    }

                    this.groupList[index].pageCount = res.pageCount;

                    
                    this.groupList[index].loading = false;
                    this.$user.setLocalStorage(storageKey, this.groupList);
                }
            })
        },
        getGroupList(){
            this.loading = true;
            this.$ajax({
                url:this.$url({app:'shop','controller':'admin.field',action:'gooodsTagGroupOption'}),
                success:(data)=>{
                    this.groupList = data;

                    this.groupList.map(item =>{
                        item.loading = false;
                        item.list = [];
                        item.page = 1;
                        item.pageCount = 0
                    })

                    this.loading = false;
                    this.$user.setLocalStorage(storageKey,data);
                }
            })
        },
        handleItemClick(tag){
            let list = [];
            list.push(tag.title);
            
            this.value.map(item=>{
                if (item != tag.title) list.push(item);
            });
            this.value = list;
        },
        removeItem(index){
            let list = this.value;
            list.splice(index,1);
            this.value = list;
        }
    },
    mounted(){
        if (this.groupList.length == 0) {
            this.getGroupList();  
        }

        let drager  = new dragsort(this.$refs.content,{
            callback:(value)=>{
                this.value = value;
            }
        });
    },
}
</script>


<style>
.field-goods-tag-list{
    min-height: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.field-goods-tag-list .field-goods-tag-item{
    padding: 2px 10px;
    border-radius: 5px;
    background-color: var(--bs-gray-200);
    font-size: 14px;
}

.field-goods-tag-list .field-goods-tag-item .field-goods-tag-remove{
    cursor: pointer;
    margin-left: 10px;
    color: var(--bs-gray-500);
}


.field-goods-tag-list .field-goods-tag-item .field-goods-tag-remove:hover{
    color: var(--bs-gray-600);
}
.field-goods-tag-pop{
    padding: 15px;
    min-height: 50px;
}

.pop-goods-tag-container{
    height: 200px;
    overflow-y:auto;
}

.pop-goods-tag-refresh{
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    color: var(--bs-gray-700);
}

.pop-goods-tag-container .pop-goods-tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pop-goods-tag-container .pop-goods-tag-list .pop-goods-tag-item{
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--bs-gray-200);
    font-size: 14px;
    cursor: pointer;
}

.pop-goods-tag-container .pop-goods-tag-list .pop-goods-tag-item:hover{
    background-color: var(--bs-gray-300);
}
</style>